<template>
  <div class="tabs">
    <nav class="tabnav">
      <a
        href="javascript:;"
        v-for="(item, index) in tabsData"
        :key="index"
        :class="{active: activeIndex === index}"
        @click="tabChange(index)"
      >{{item.title}}</a>
    </nav>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  props: {
    defaultActiveIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      activeIndex: this.defaultActiveIndex,
      tabsData: []
    }
  },

  mounted () {
    this.initTabs()
  },

  methods: {
    initTabs () {
      this.tabsData = this.$children
      this.$children.forEach((item, index) => {
        item.index = index
      })
    },
    tabChange (index) {
      this.activeIndex = index
      this.$emit('change', index)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/index.scss';
.tabs {
  @include wh(100%, auto);
  .tabnav {
    @include wh(100%, 50px);
    @include flex(row);
    line-height: 50px;
    background: #ddecff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    a {
      flex: 1;
      color: $text-title-color;
      font-size: $font-size-l;
      text-align: center;
      &.active {
        color: $base-color;
        background: #fff;
      }
    }
  }
}

</style>
